<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Cool Book网上书店</title>
		<link rel="stylesheet" href="css/site.css" />
		<link rel="stylesheet" href="css/glyphicon.css" />
		<link rel="stylesheet" type="text/css" href="css/booklist.css"/>
		<style>
			#categories{
				float:left;
				width: 30%;
				padding-top:10px;
			}
			#details{
				float:right;
				width: 70%;
				padding-top:10px;
			}
		</style>
	</head>
	<body>
		<header></header>
		
		<script id="bookTemplate" type="text/template">
			<li class="book item">
				<div class="book picture">
					<a href="book.html?id={{id}}">
						<img src="img/bookimages/{{pictureurl}}">
					</a>
				</div>
				<div class="book content">
					<div class="book title">
						<a href="book.html?id={{id}}">
							{{title}}
						</a>
					</div>
					<div class="book publisher">
						{{publisher}}&nbsp;&nbsp;出版日期：{{publishdate}}
					</div>
					<div class="book author">
						作者：{{authors}}
					</div>
					<div class="book price">
						原价：<span class="book listprice">￥{{listprice}}</span>
						&nbsp;&nbsp;
						优惠价：<span class="book reducedprice">￥{{reducedprice}}</span>
					</div>
					<div class="book buy">
						<button class="btn green" onclick="addToCart({{id}},'{{title}}', {{reducedprice}})">放入购物车</button>
					</div>
				</div>
				<div class="clearfix"></div>
			</li>
		</script>
		
		<section>
			<div id="categories">
				<a class="btn block blue" onclick="showCategoryDetails()">所有类别</a>
			</div>
			<div id="details">
				<ul class="booklist">
				</ul>
				<div class="pager">
				</div>					
			</div>
			<div class="clearfix"></div>
		</section>
		
		<footer></footer>
		
		<script src="js/msgbox.js"></script>
		<script src="js/cookie.js"></script>
		<script src="js/cart.js"></script>
		<script type="text/javascript" src="js/util.js" ></script>
		<script type="text/javascript" src="js/pageInit.js" ></script>
		<script src="js/booklist.js" type="text/javascript"></script>
		<script id="categoryScript"></script>
		<script id="bookScript"></script>
		<script>
			var categoriesContainer = document.getElementById("categories");
			
			getResource('dataservice/categories.js', function(result, data){
				if(!result){
					alert("无法下载数据！");
				} else{
					document.getElementById('categoryScript').innerHTML = data;
					for(var i=0;i<categories.length;i++){
						var a = document.createElement("a");
						a.setAttribute("class", "btn block blue");
						a.innerHTML = categories[i].name;
						a.setAttribute("onclick", "showCategoryDetails(" + 
							categories[i].id + ")");
						// 请注意，下列代码是错误的
						/*a.addEventListener("click", function(){
							showCategoriesDetails(categories[i].id);
						});*/
						categoriesContainer.appendChild(a);
					}
					// 类别数据处理完成后，加载“所有类别”下的详细图书数据
					showCategoryDetails();
				}
			});
			
			function addToCart(id, title, price){
				cart.addToCart(id, title, price);
				updateCartSummary();
			}
		</script>
	</body>
</html>
